{extend name="top/index" /}
{block name="main"}
<link href="/static/assets/css/toastr.min.css" rel="stylesheet"/>
<script src="/static/assets/js/toastr.min.js" rel="stylesheet"/></script>
<div class="page-content-wrapper">
        <div class="page-content" style=" min-height: 700px;">
            <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
            <div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                            <h4 class="modal-title">Modal title</h4>
                        </div>
                        <div class="modal-body">
                             Widget settings form goes here
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn blue">Save changes</button>
                            <button type="button" class="btn default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
            <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
            <!-- BEGIN STYLE CUSTOMIZER -->
            
            <!-- END STYLE CUSTOMIZER -->
            <!-- BEGIN PAGE HEADER-->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                    角色管理 <!-- <small>view order details</small> -->
                    </h3>
                    <ul class="page-breadcrumb breadcrumb">
                        
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="{:url('index/index/index')}">
                                Home
                            </a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li>
                            <a href="{:url('index/Role/index')}">
                                角色管理
                            </a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
               <a class="btn btn-primary btn add-btn" style="float: right;" href="{:url('add')}">新增角色</a>
               <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>角色名</th>
                            <th>权限</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="res" id="vo"}
                        <tr>
                            <td>{$vo.chara_id}</td>
                            <td>{$vo.chara_name} </td>
                           
                            <td>
                            {foreach $data as $r}
                                    {if $vo.chara_id == $r.chara_id}
                                    {$r.priv_name}
                                    {/if}
                            {/foreach}
                            </td>
                            <td>

                               <button class="btn btn-danger btn del-btn" data-id="{$vo.chara_id}" data-toggle="modal" data-target="#confirm-delete">删除</button>
                               <a href="{:url('edit', ['id'=>$vo['chara_id']])}" class="btn btn-warning btn">编辑</a>
                               <a href="{:url('getPower', ['id'=>$vo['chara_id']])}" class="btn btn-success btn">分配权限</a>
                            </td>
                        </tr>
                        {/volist}
                    
                    </tbody>
                </table>
                {$page}


            </div>
    </div>

                                <!-- 删除部门的模态框 -->
                                    <!-- <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                    请确认
                                    </div>
                                    <div class="modal-body">
                                    确认删除该角色吗？
                                    </div>
                                    <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                                    <a class="btn btn-danger btn-ok" >删除角色</a>
                                    </div>
                                    </div>
                                    </div>
                                    </div>
                                    
                                    <script>
                                        $('#confirm-delete').on('show.bs.modal', function(e) {
                                        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
                                        });
                                    </script> -->
                                <!--  -->

<script>
        $(function(){
            // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-top-right" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };
        // 触发删除用户
        $('.del-btn').click(function (){
            var ac_id = $(this).attr('data-id');
            // var ccc = $(this).parent().parent();
            // var obj = $(this).parents('tr');
            // console.log(ac_id);
            // console.log(obj);

            // console.log('删除操作,ID:', ac_id);
        //     if (confirm('你确定要删除吗?!')) {
        // }
            delAjax(ac_id);
        });
        // AJAX删除
        function delAjax(ac_id){
            // console.log(obj);
            $.ajax({
            type: 'post',
            url: "{:url('index/Role/delete')}" ,
            data: {
                chara_id:ac_id
            },
            dataType: 'json',
            success: function (data) {
                if (data) {
                toastr.success('删除成功');
                // setInterval(function(){
                //   $('.close-btn').click();
                // }, 1000);
                setInterval(function(){
                  location.reload(true);
                }, 1000);
              }else{
                toastr.error('删除失败，请重试');
              }
                // console.log(data);
                // if (data.status) {
                //     // 将该条目删除掉
                //     obj.remove();
                // } else {
                // }
            },
            error: function () {
                alert('AJAX操作失败');
            }
        });
        }
        })
    </script>
    <script>
        $(function(){
            $('.role').addClass("active");
        });
    </script>
{/block}